// 引入node中的path模块，处理文件路径 的小工具
const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 1. 加载 Vue Loader 插件（vue单文件组件）
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 1. 导入webapck, 热模块加载
const webpack = require('webpack')

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: 'production', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模块文件路径 
    // 出口
    output: {
        // path: './dist/', 错误的，要指定绝对路径
        path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径
        filename: 'bundle.js'
    },
    // 配置插件
    plugins: [new HtmlWebpackPlugin({
        // 此插件作用是将 index.html 打包到 bundle.js 所在目录中, 
        // 同时也会在 index.html 中自动的 <script> 引入 bundle.js 
        // 注意：其中的文件名 bundle 取决于上面output.filename中指定的名称 
        template: './index.html'
    }),
    // 2. 引入Vue插件
    new VueLoaderPlugin(),
    // 3. 配置热模块加载对象
    new webpack.HotModuleReplacementPlugin()
    ],
    // 实时重新加载 
    devServer: {
        contentBase: './dist',
        // 2. 开启热模块加载,
        hot: true 
    },
    module: { // 模块 
        rules: [ // 规则 
            // css 打包
            {
                test: /\.css$/, // 正则表达式，匹配 .css 文件资源 
                use: [ // 使用的 Loader ,注意顺序不能错 
                    'style-loader',
                    'css-loader'
                ]
            },
            // images 打包
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            // 解决兼容性问题
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/, // 排除的目录 
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'] // 内置好的转译工具 
                    }
                }
            },
            // 3. 配置vue-loader
            {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            }
        ]
    }
    // 解析完整版 vue.js 
    // resolve: { 
    //     alias: { 
    //         'vue$': 'vue/dist/vue.js' 
    //     } 
    // }
}